<template>
  <div class="page">
    <van-sticky>
      <van-nav-bar
          title="试卷列表"
          left-arrow
          @click-left="onClickLeft"
      />
    </van-sticky>
    <div class="wrapper" v-if="loading">
      <van-loading color="#1989fa" type="spinner"/>
    </div>
    <van-form v-else @submit="onSubmit">
      <h2 class="title">试卷名称：2022年入党考试题</h2>
      <div class="pannel">
        <h2>单选题</h2>
        <template v-for="(ele, index) in singleQuestion">
          <div class="card">
            <h2 class="card-hd">{{ index +1 }}、{{ele.title}}</h2>
            <van-field
                :rules="[{ validator: validatorDanxuan, message: '请选择合适的选项...' }]"
                :name="'radio-'+ ele.id">
              <template #input>
                <van-radio-group v-model="radioSelect['radio'+ ele.id]">
                  <van-radio v-for="(e,k) in ele.options" class="item" :name="k">{{k}} {{e}}
                  </van-radio>
                </van-radio-group>
              </template>
            </van-field>
          </div>
        </template>
      </div>
      <div class="pannel">
        <h2>多选题</h2>
        <template v-for="(ele, index) in multipleQuestion">
          <div class="card">
            <h2 class="card-hd">{{ index +1 }}、{{ele.title}}：</h2>
            <van-field
                :rules="[{ validator:validatorCheckBox, message: '请选择合适的选项...' }]"
                :name="'checkbox-' + ele.id">
              <template #input>
                <van-checkbox-group v-model="radioSelect['checkbox' + ele.id]">
                  <van-checkbox v-for="(e, k) in ele.options" class="item" :name="k">{{k}} {{e}}
                  </van-checkbox>
                </van-checkbox-group>
              </template>
            </van-field>
          </div>
        </template>
      </div>
      <div class="pannel">
        <h2>判断题</h2>
        <template v-for="(ele, index) in judgementQuestion">
          <div class="card">
            <h2 class="card-hd">{{ index + 1 }}、{{ ele.title }}</h2>
            <van-field
                :rules="[{ validator:validatorJudg, message: '请选择合适的选项...' }]"
                :name="'judg-' + ele.id">
              <template #input>
                <van-radio-group v-model="judgList['judg' +  ele.id]">
                  <van-radio class="item" name="A">对</van-radio>
                  <van-radio class="item" name="B">错</van-radio>
                </van-radio-group>
              </template>
            </van-field>
          </div>
        </template>
      </div>
      <div class="pannel">
        <h2>简答题</h2>
        <template v-for="(ele, index) in answerQuestion">
          <div class="card">
            <h2 class="card-hd">{{ index + 1 }}、{{ ele.title }}</h2>
            <van-field
                :rules="[{ validator:validatorAnswer, message: '' }]"
                :name="'answer-' + ele.id"
                v-model="judgList['answer' +  ele.id]"
                rows="3"
                autosize
                type="textarea"
                maxlength="1000"
                placeholder="请输入答案"
                show-word-limit
            >
            </van-field>
          </div>
        </template>
      </div>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import {ref,reactive,toRefs} from "vue";
import {useRoute, useRouter} from "vue-router";
import {getPageById,submitExam} from "../api/page";
import {Dialog, Notify} from 'vant';
const state = reactive({
  loading:Boolean,
  pageId:Number,
  title:String,
  judgList:[] as any [],
  answerQuestion:[] as any [],
  judgementQuestion:[] as any [],
  multipleQuestion:[] as any [],
  singleQuestion:[] as any [],
  radioSelect:{} as any,
  checkBoxSelect:{} as any,
  userInfo:{} as any,
  questionType:String
})
let {loading,
  pageId,
    title,
  radioSelect,
  checkBoxSelect,
  judgList,
  answerQuestion,
  judgementQuestion,
  multipleQuestion,
  singleQuestion,
  userInfo,
  questionType
} = toRefs(state)
const router =useRouter()
const route = useRoute()
console.log("pageId:",route.params.id)
pageId.value = route.params.id
userInfo.value =JSON.parse(localStorage.getItem('hsjyUserInfo'))
console.log("userInfo:",userInfo.value)
const onClickLeft = ()=>{
  router.back()
}
const onSubmit= (values)=>{
  Dialog.confirm({
    title: '标题',
    message: '是否提交试卷，一旦提交无法撤销！！！',  })
      .then(() => {
        // on confirm
        console.log("已经选择了确认")
        submit(values)
      })
      .catch(() => {
        // on cancel
        console.log("已经选择了取消")
      });

  console.log(values)
}
const submit = async (values)=>{
  let answer = {};
  for (let attr in values) {
    answer[attr.split('-')[1]] = values[attr];
  }
  let answerInfos = {
    "title": title.value,
    "answer": answer,
    "userName": userInfo.value.name,
    "userId": userInfo.value._id,
    "questionId": pageId.value,
    "answerTime": "00：00：00",
    "questionType": questionType.value
  };
  console.log("answer:",answerInfos)
  let res = await submitExam(answerInfos)
  console.log("res:",res)
  if (res.statusCode == 200 ){
    Notify({type:'success',message:'提交成功',duration:800})
    router.push('/show/myexams')
  }
}
const getQuestion = async (id)=>{
  loading.value = true
  let res = await getPageById(id)
  loading.value = false
  answerQuestion.value = res.data.questionList.answerQuestion
  judgementQuestion.value = res.data.questionList.judgementQuestion
  multipleQuestion.value = res.data.questionList.multipleQuestion
  singleQuestion.value = res.data.questionList.singleQuestion
  title.value = res.data.questionList.title
  questionType.value = res.data.questionList.questionType
  console.log(res)
}
const validatorDanxuan=(value)=> {
  var allowItems = ['A', 'B', 'C', 'D'];
  return allowItems.includes(value);
}
const validatorCheckBox=(value) =>{
  return value.length > 0;
}
const validatorJudg = (value) =>{
  var allowItems = ['A', 'B'];
  return allowItems.includes(value);
}
const validatorAnswer = (value)=> {
  return value.trim().length > 0;
}
getQuestion(pageId.value)
</script>

<style scoped lang="less">
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  span {
    width: 100px;
    height: 100px;
  }
}
.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
.page {
  margin-bottom: 1.5rem;
  .pannel {
    h2 > {
      font-size: 0.48rem;
      color: #000;
      background-color: #fff;
      padding: 0.2rem 0;
      padding-left: 0.2rem;
      font-weight: 700;
      border-bottom: 1px solid #e4e4e4;
    }
  }
  .title {
    background-color: #fff;
    margin: 0.3rem 0;
    font-size: 0.48rem;
    color: #000;
    padding: 0.1rem 0;
    padding-left: 0.2rem;
    line-height: 1.5;
  }
  .card {
    margin-bottom: 0.2rem;
    .card-hd {
      padding: 0.4rem;
      background-color: #fff;
      font-size: 0.38rem;
      line-height: 1.4;
      color: #000;
      font-weight: 500;
      padding-bottom: 0.2rem;
    }
    .van-radio-group, .van-checkbox-group {
      .item {
        margin: 0.2rem 0;
      }
    }
  }
}
</style>
